<template>
  <div class="app-container">
    <el-form
      ref="messageForm"
      :model="messageForm"
      :rules="messageRules"
      label-width="80px"
      label-position="top"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="目标用户" prop="type">
            <div>
              <el-radio v-model="messageForm.type" :label="0"
                >全体用户</el-radio
              >
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="1">新用户 (从未支付成功过的用户)</el-radio>
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="2"
                >最近<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.day2"
                  placeholder="n"
                  style="width: 80px"
                />天内消费的用户</el-radio
              >
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="3"
                >最近<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.day3"
                  placeholder="n"
                  style="width: 80px"
                />天内未消费的用户</el-radio
              >
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="4"
                >最近<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.day4"
                  placeholder="n"
                  style="width: 80px"
                />天内消费达到<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.amount4"
                  placeholder="m"
                  style="width: 80px"
                />元的用户</el-radio
              >
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="5"
                >最近<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.day5"
                  placeholder="n"
                  style="width: 80px"
                />天内消费没有达到<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.amount5"
                  placeholder="m"
                  style="width: 80px"
                />元的用户</el-radio
              >
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="6"
                >最近<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.day6"
                  placeholder="n"
                  style="width: 80px"
                />天内消费达到<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.count6"
                  placeholder="y"
                  style="width: 80px"
                />次的用户</el-radio
              >
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="7"
                >最近<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.day7"
                  placeholder="n"
                  style="width: 80px"
                />天内消费没有达到有<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.count7"
                  placeholder="y"
                  style="width: 80px"
                />次的用户</el-radio
              >
            </div>
            <div>
              <el-radio v-model="messageForm.type" :label="8"
                >客户之前消费超过<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.amount8"
                  placeholder="n"
                  style="width: 80px"
                />元，但最近<input
                  type="text"
                  class="form-control d-inline-block"
                  v-model.number="messageForm.day8"
                  placeholder="y"
                  style="width: 80px"
                />天没有消费的用户</el-radio
              >
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="23">
          <el-form-item label="推送的消息" prop="message">
            <el-input v-model="messageForm.message" type="textarea" placeholder="请输入要推送的内容"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"
            >
            </el-input>
          </el-form-item>
          <!--
          <div style="font-size: 12px; color: #606266; margin-top: 7px">
            不能超过14个汉字
          </div>
          -->
        </el-col>
      </el-row>
      <el-col :offset="18">
        <el-button
          type="primary"
          @click="handleSubmitMessage"
          size="small"
          :loading="sendLoading"
          :disabled="sendLoading"
          >立 刻 推 送</el-button
        >
        <el-button
          @click="clearSubmitMessage"
          size="small"

          :disabled="sendLoading"
          >清 空</el-button
        >
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { selectSendMessage } from "@/api/customer/manage";

export default {
  name: "Message_Grouping",

  data() {
    let validateType = (rule, type, callback) => {
      if (!type && type !== 0) {
        callback(new Error("请选择目标用户"));
        return;
      }
  
      if (type == 1) {
      } else if (type == 0) {
      }else if (type == 2) {
        if (!this.messageForm.day2) {
          callback(new Error("你目前选中了第二行，请将第二行填写完整"));
          return;
        }
      } else if (type == 3) {
        if (!this.messageForm.day3) {
          callback(new Error("你目前选中了第三行，请将第三行填写完整"));
          return;
        }
      } else if (type == 4) {
        if (!this.messageForm.day4 || !this.messageForm.amount4) {
          callback(new Error("你目前选中了第四行，请将第四行填写完整"));
          return;
        }
      } else if (type == 5) {
        if (!this.messageForm.day5 || !this.messageForm.amount5) {
          callback(new Error("你目前选中了第五行，请将第五行填写完整"));
          return;
        }
      } else if (type == 6) {
        if (!this.messageForm.day6 || !this.messageForm.count6) {
          callback(new Error("你目前选中了第六行，请将第六行填写完整"));
          return;
        }
      } else if (type == 7) {
        if (!this.messageForm.day7 || !this.messageForm.count7) {
          callback(new Error("你目前选中了第七行，请将第七行填写完整"));
          return;
        }
      } else if (type == 8) {
        if (!this.messageForm.amount8 || !this.messageForm.day8) {
          callback(new Error("你目前选中了第八行，请将第八行填写完整"));
          return;
        }
      }
      // const len = this.bytesLength(value);
      // if (len > 28) {
      //   callback(new Error("输入的汉字数量不超过14"));
      //   return;
      // }
      callback();
    };
    let validateMessage = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入推送的消息"));
        return;
      }
      const len = this.bytesLength(value);
      if (len > 28) {
        callback(new Error("输入的汉字数量不超过14"));
        return;
      }
      callback();
    };
    return {
      sendLoading: false,
      messageRules: {
        type: [{ validator: validateType, trigger: "change" }],
        // message: [{ validator: validateMessage, trigger: "change" }],
      },
      messageForm: {
        regionDataList: [], //["120000","120100","120102"] 省市区码
      },
    };
  },
  created() {},
  methods: {
    handleSubmitMessage() {
      this.$refs["messageForm"].validate((valid) => {
        if (valid) {
          const msgRequest = {};
          const type = this.messageForm.type;

          msgRequest.type = type;
          msgRequest.message = this.messageForm.message;

          if (type == 0) {
          } else if (type == 1) {
          } else if (type == 2) {
            msgRequest.day = this.messageForm.day2;
          } else if (type == 3) {
            msgRequest.day = this.messageForm.day3;
          } else if (type == 4) {
            msgRequest.day = this.messageForm.day4;
            msgRequest.amount = this.messageForm.amount4;
          } else if (type == 5) {
            msgRequest.day = this.messageForm.day5;
            msgRequest.amount = this.messageForm.amount5;
          } else if (type == 6) {
            msgRequest.day = this.messageForm.day6;
            msgRequest.count = this.messageForm.count6;
          } else if (type == 7) {
            msgRequest.day = this.messageForm.day7;
            msgRequest.count = this.messageForm.count7;
          } else if (type == 8) {
            msgRequest.day = this.messageForm.day8;
            msgRequest.amount = this.messageForm.amount8;
          }
          this.sendLoading = true;
          selectSendMessage(msgRequest)
            .then((res) => {
              if (res.code == 200) {
                this.msgSuccess(res.msg);
              } else {
                throw new Error("");
              }
            })
            .catch(() => {
             // this.msgError("推送信息失败");
              this.msgSuccess("推送中请稍后");
            }).finally(()=>{
              this.sendLoading = false;
            });
        }
      });
    },
    clearSubmitMessage() {
      this.messageForm = {};
    },
    bytesLength(str) {
      var count = str.length;
      for (var i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 255) {
          count++;
        }
      }
      return count;
    },
  },
};
</script>
<style lang="scss">
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.button-from {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .button-style {
    width: 430px;
    height: 80px;
    line-height: 115px;
  }
}
.card-table {
  margin-top: 40px;
  background-color: #f8f8f8;
  .el-button {
    margin-bottom: 20px;
    margin-right: 20px;
  }
}
::v-deep .el-form-item {
  .el-form-item__label {
    padding: 0;
    margin: 0;
  }
  .el-button--cyan {
    margin-left: 20px;
  }
}
</style>